<template>
  <!-- 菜单管理 -->
  <div class="menu-manage">

    <!-- :label="$t('menuManage.serial')"> -->

    <div v-if='languagesdescribe'
         style="box-shadow: 0 0 2px #888888;z-index:10; position: fixed;left: 50%;padding:30px; width: 600px; height: 500px;top: 50%; margin-top: -250px; margin-left: -300px; background: #fff;">

      <el-form ref="form"
               :model="form"
               label-width="80px">
        <el-form-item class="langgenumsecond"
                      :label="$t('menuManage.secondlevelname')">
          <el-input v-model="form.name1"></el-input>
        </el-form-item>

        <el-form-item class="langgenumsecond"
                      :label="$t('menuManage.language1')">
          <el-input v-model="form.name2"></el-input>
        </el-form-item>

        <el-form-item class="langgenumsecond"
                      :label="$t('menuManage.language2')">
          <el-input v-model="form.name3"></el-input>
        </el-form-item>

        <el-form-item class="langgenumsecond"
                      :label="$t('menuManage.language3')">
          <el-input v-model="form.name4"></el-input>
        </el-form-item>

        <el-form-item class="langgenumsecond"
                      :label="$t('menuManage.describe')">
          <el-input v-model="form.name5"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary"
                     @click="onSubmit">{{ $t('menuManage.establishfreens') }}</el-button>
          <el-button @click="offSubmit">{{ $t('menuManage.cancelsecondfreens') }}</el-button>
        </el-form-item>
      </el-form>

    </div>

    <!-- 标题 -->
    <div class="menu-title">
      <span>{{ $t('header.MenuManage') }}</span>
      <span @click="openRecycle">{{ $t('menuManage.recycle') }}</span>
    </div>
    <div class="menu-content">
      <!-- 侧边栏 -->
      <aside>
        <!-- 新增分类 -->
        <el-input clearable
                  :placeholder="$t('menuManage.newClassPlaceholder')"
                  v-model="newClass">
          <template slot="append">
            <el-tooltip class="item"
                        effect="dark"
                        :content="$t('menuManage.newClass')"
                        placement="top">
              <span class="add-btn"
                    @click="addType">{{ $t('menuManage.newClass') }}</span>
            </el-tooltip>
          </template>
        </el-input>
        <!-- 拖拽排序组件 -->
        <draggable v-loading="loading"
                   v-model="goodsType"
                   @update="dragTypeSort">
          <transition-group>
            <!-- 分类 -->
            <div class="class-item-wrapper"
                 v-for="(type,index) in goodsType"
                 :key="index+'a'">

              <div class="class-item 1">
                <el-input v-if="editTypeIndex==index&isEditType"
                          v-model="editingClass.name"></el-input>
                <span class="class-item-span"
                      v-else
                      :class="{'active-class-item':index===activeIndex}"
                      @click="changeType(type,index)"><span>{{type.name}}
                  </span>
                </span>

                <!-- 关闭操作/保存操作按钮 -->

                <div class="btn-op btn_tp"
                     v-if="isOpenHandle&isOpenIndex==index">
                  <!-- 取消操作 -->
                  <!-- <el-tooltip class="item"
                              effect="dark"
                              :content="$t('common.cancelOperation')"
                              placement="top">
                    <el-button icon="el-icon-close"
                               circle
                               @click="closeHandle"></el-button>
                  </el-tooltip> -->
                  <!-- 保存操作 -->
                  <!-- <el-tooltip class="item"
                              effect="dark"
                              :content="$t('common.saveOperation')"
                              placement="top">
                    <el-button type="success"
                               icon="el-icon-check"
                               circle
                               @click="saveHandle"></el-button>
                  </el-tooltip> -->
                </div>
                <!-- 开启操作按钮 -->

                <div class="open-handle-btn"
                     @click="OpenHandle(type,index)"
                     v-else>
                  <el-tooltip class="item 1"
                              effect="dark"
                              placement="top">
                    <div slot="content">{{$t('common.sortPrompt1')}}<br />{{$t('common.sortPrompt2')}}</div>
                    <img src="../../assets/imgs/expand.png"
                         width="16"
                         height="13" />
                  </el-tooltip>
                </div>

              </div>
              <div class="class-item 2"
                   v-if="editTypeIndex==index&isEditType">
                <el-input clearable
                          :placeholder="$t('menuManage.newClassPlaceholder')"
                          style="margin-right: 10px;"
                          v-model="editingClass.en_name"></el-input>
              </div>
              <div class="class-item 3"
                   v-if="editTypeIndex==index&isEditType">
                <el-input clearable
                          :placeholder="$t('menuManage.language2')"
                          style="margin-right: 10px;"
                          v-if="editTypeIndex==index&isEditType"
                          v-model="editingClass.zn_name"></el-input>
              </div>
              <div class="class-item 4"
                   v-if="editTypeIndex==index&isEditType">
                <el-input clearable
                          :placeholder="$t('menuManage.language3')"
                          style="margin-right: 10px;"
                          v-if="editTypeIndex==index&isEditType"
                          v-model="editingClass.de_name"></el-input>
              </div>
              <div class="class-item 5"
                   v-if="editTypeIndex==index&isEditType">
                <el-input :placeholder="$t('menuManage.describe')"
                          clearable
                          style="margin-right: 10px;"
                          v-model="editingClass.type_desc"></el-input>
              </div>
              <div class="btn-op-wrapper"
                   v-if="isOpenHandle&isOpenIndex==index">
                <!-- 编辑分类/删除分类/选择特殊类型 -->
                <div class="btn-op btn_left">

                  <!-- 取消操作 -->
                  <el-tooltip class="item"
                              effect="dark"
                              :content="$t('common.cancelOperation')"
                              placement="top">
                    <el-button icon="el-icon-close"
                               circle
                               @click="closeHandle"></el-button>
                  </el-tooltip>
                  <!-- 保存操作 -->

                  <!-- 新增二级菜单 -->
                  <el-tooltip v-if='newchild'
                              class="item"
                              effect="dark"
                              :content="$t('common.nwechild')"
                              placement="top">
                    <el-button type="success"
                               icon="el-icon-star-off"
                               circle
                               @click="newchilds(type.id)"></el-button>

                  </el-tooltip>
                  <!-- 保存修改分类 -->

                  <el-tooltip v-if="!newchild"
                              class="item"
                              effect="dark"
                              :content="$t('common.saveOperation')"
                              placement="top">
                    <el-button type="success"
                               icon="el-icon-check"
                               circle
                               @click="saveHandle"></el-button>

                  </el-tooltip>

                  <!-- 修改分类按钮 -->
                  <el-tooltip class="item"
                              effect="dark"
                              :content="$t('menuManage.modifyClass')"
                              placement="bottom">
                    <el-button type="primary"
                               icon="el-icon-edit"
                               circle
                               @click="editType(type,index)"></el-button>
                  </el-tooltip>
                  <!-- 删除分类 -->
                  <el-tooltip class="item"
                              effect="dark"
                              :content="$t('menuManage.deleteClass')"
                              placement="bottom">
                    <el-button type="danger"
                               icon="el-icon-delete"
                               circle
                               @click="deleteType(type)"></el-button>
                  </el-tooltip>
                  <!-- 新增复制功能 -->

                </div>
                <!-- 新增复制功能 -->
                <div>

                  <el-row>
                    <el-button type="success"
                               round
                               @click="copylink(type,index)">{{$t('menuManage.copyClass')}}</el-button>

                  </el-row>

                </div>
              </div>

              <!-- 二级菜单 -->

              <el-row v-if="type.child == ''?false:true"
                      class="tac">
                <el-col :span="24">
                  <el-menu 
                        active-text-color='#303133'
                           class="el-menu-vertical-demo"
                           @open="handleOpen"
                           @close="handleClose">
                    <el-submenu index="1">
                      <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>{{$t('menuManage.secondment')}}</span>
                      </template>
                      <el-menu-item-group>
                        <!-- <template slot="title">分组一</template> -->

<draggable v-loading="loading" v-model="type.child"
  @update="childerdragTypeSort(type.child)">
          <transition-group>
                        <el-menu-item class="childs"
                                      style="height:auto"
                                      v-for='(childitem,indexchild) in type.child'
                                      :key="indexchild+'b'"
                                      :index='indexchild.toString()'>
                          <div class="childs"
                               style="padding-left:0">
                            <span @click='childType(childitem,index)'
                                  style="width: 197px;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;"
                                        :class="[secondlevelId==childitem.id? 'childColor':'']"
                                        >
                              {{childitem.name}}
                            </span>
                            <img  v-if="openChildOperator==indexchild">
                            <img @click="Openchilds(indexchild)" v-else 
                                 src="../../assets/imgs/expand.png"
                                 width="16"
                                 height="13" />
                          </div>

                          <!-- 二级菜单操作 -->
                          <div class="btn-op-wrapper"
                               v-if="childsoperation&&childsIndex==indexchild">
                            <!-- 编辑分类/删除分类/选择特殊类型 -->
                            <div class="btn-op btn_left">
                              <!-- 取消操作 -->
                              <el-tooltip style="width:40px;height:40px;padding:8px"
                                          class="item"
                                          effect="dark"
                                          :content="$t('common.cancelOperation')"
                                          placement="top">
                                <el-button icon="el-icon-close"
                                           circle
                                           @click="closechilds"></el-button>
                              </el-tooltip>
                              <!-- 保存修改分类 -->

                              <!-- 修改二级菜单按钮 -->
                              <el-tooltip style="width:40px;height:40px;padding:8px"
                                          class="item"
                                          effect="dark"
                                          :content="$t('menuManage.modifyClass')"
                                          placement="bottom">
                                <el-button type="primary"
                                           icon="el-icon-edit"
                                           circle
                                           @click="editchilds(childitem)"></el-button>
                              </el-tooltip>
                              <!-- 删除二级菜单 -->
                              <el-tooltip style="width:40px;height:40px;padding:8px"
                                          class="item"
                                          effect="dark"
                                          :content="$t('menuManage.deleteClass')"
                                          placement="bottom">
                                <el-button type="danger"
                                           icon="el-icon-delete"
                                           circle
                                           @click="deletechildsType(childitem)"></el-button>
                              </el-tooltip>
                              <!-- 新增复制功能 -->
                            </div>
                            <!-- 新增复制功能二级菜单 -->
                            <div>
                              <el-row>

                                <el-button type="success"
                                           round
                                           @click="copychilds(childitem)">{{$t('menuManage.copyClass')}}
                                </el-button>

                              </el-row>
                            </div>
                          </div>

                        </el-menu-item>
          </transition-group>

</draggable>




                      </el-menu-item-group>
                    </el-submenu>
                  </el-menu>
                </el-col>
              </el-row>

            </div>
          </transition-group>
        </draggable>
      </aside>
      <main>
        <div class="add-class">
          <!-- 新增菜品 -->
          <el-button @click="openAddGood">{{$t('menuManage.newFood')}}</el-button>
          <!-- 搜索菜品 -->
          <div class="btn-arr">
            <el-button type="primary"
                       @click="putOnSale(1)">
              {{$t('menuManage.onekeyputaway')}}
            </el-button>
            <el-button type="danger"
                       @click="putOnSale(0)">
              {{$t('menuManage.onekeysoldout')}}
            </el-button>
            <el-input class="search-goods"
                      :placeholder="$t('common.search')"
                      clearable
                      v-model="searchGood">
              <template slot="append"><span @click="getGoods">{{$t('common.search')}}</span></template>
            </el-input>
          </div>
        </div>
        <!-- 菜品数据 -->
        <el-table v-loading="goodsDataLoading"
                  :element-loading-text="$t('menuManage.foodLoading')"
                  :data="goodsData"
                  border>
          <el-table-column prop="good_order"
                           :label="$t('menuManage.serial')">
            <template slot-scope="{row,$index}">
              <div @click="changeNumber($index)">
                <el-input v-if="editable[$index]"
                          v-model="row.good_order"
                          @blur="changeGoodSort(row)"></el-input>
                <span v-else>{{row.good_order}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="product_id"
                           :label="$t('menuManage.productNum')">
          </el-table-column>
          <el-table-column prop="name"
                           :label="$t('menuManage.foodName')">
          </el-table-column>

          <el-table-column prop="printer"
                           :label="$t('menuManage.defaultType')">
            <!-- <template slot-scope="scope">
              <span>{{scope.row.goods_type | formatDefaultType}}</span>
            </template> -->
          </el-table-column>

          <el-table-column prop="cost"
                           :label="$t('menuManage.price')">
            <template slot-scope="scope">
              <span>{{scope.row.cost | numberFilter}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="count"
                           :label="$t('menuManage.daysInventory')"></el-table-column>
          <el-table-column prop="is_live"
                           :label="$t('menuManage.status')">
            <template slot-scope="scope">
              <span>{{scope.row.is_live === 1 ?
                $t('menuManage.active') : $t('menuManage.inactive')}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="instro"
                           :label="$t('menuManage.commoditydescribe')"></el-table-column>
          <el-table-column width="150px"
                           fixed="right"
                           :label="$t('common.operation')">
            <template slot-scope="scope">
              <el-button type="text"
                         size="small"
                         @click="editGood(scope.row)">{{ $t('common.edit') }}
              </el-button>
              <el-button style="margin-left: 30px;"
                         @click="deleteGood(scope.row)"
                         type="text"
                         size="small"><span style="color: red">{{ $t('menuManage.recycle') }}</span></el-button>
              <el-tooltip class="item"
                          effect="dark"
                          :content="$t('menuManage.isOpenTakeOut')"
                          placement="top">
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px;text-align: center">
          <el-pagination background
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="page.num"
                         :page-sizes="page.sizes"
                         :page-size="page.size"
                         :total="page.total"
                         layout="sizes, prev, pager, next">
          </el-pagination>
        </div>
      </main>
    </div>
    <!-- 遮罩层 -->
    <div v-show="goodsVisible"
         class="mask-layer"></div>
    <!-- 新增/修改菜品dialog -->
    <div v-if="goodsVisible"
         class="add-good-dialog-wrapper">
      <div class="add-good-dialog">
        <!-- 标题 -->
        <div class="add-good-title">
          {{goodsVisibleTitle}}
          <i class="close-icon el-icon-close"
             @click="closeGoodHandle"></i>
        </div>
        <div class="add-good-first">
          <div class="first-left">
            <el-form style="width: 400px;"
                     label-position="left"
                     ref="goodsForm"
                     :model="goodsForm"
                     label-width="105px">
              <!-- 菜品排序 -->
              <el-form-item :label="$t('menuManage.sortrank')"
                            prop="good_order"
                            :rules="[ {required: true, message: $t('menuManage.serialnotlong'),
                            trigger: 'blur'} ]">
                <el-input style="width: 360px;"
                          size="small"
                          clearable
                          v-model="goodsForm.good_order"></el-input>
              </el-form-item>
              <!-- 菜品名称 -->
              <el-form-item :label="$t('menuManage.foodName')"
                            prop="name"
                            :rules="[ {required: true, message: $t('menuManage.emptyFoodName'),
                            trigger: 'blur'} ]">
                <el-input style="width: 360px;"
                          size="small"
                          clearable
                          v-model="goodsForm.name"></el-input>
              </el-form-item>
              <!-- 规格 -->
              <el-form-item :label="$t('menuManage.specification')">
                <el-input style="width: 360px;"
                          size="small"
                          clearable
                          v-model="goodsForm.volume"></el-input>
              </el-form-item>
              <!-- 厨房菜名 -->
              <el-form-item :label="$t('menuManage.kitchenname')">
                <el-input style="width: 360px;"
                          size="small"
                          clearable
                          v-model="goodsForm.kitchen"></el-input>
              </el-form-item>
              <!-- 默认菜品名称一 -->
              <el-form-item :label="$t('menuManage.language1')">
                <el-input style="width: 360px;"
                          size="small"
                          clearable
                          v-model="goodsForm.en_name"></el-input>
              </el-form-item>
              <!-- 默认菜品名称二 -->
              <el-form-item :label="$t('menuManage.language2')">
                <el-input style="width: 360px;"
                          size="small"
                          clearable
                          v-model="goodsForm.zh_cn_name"></el-input>
              </el-form-item>
              <!-- 默认菜品名称三 -->
              <el-form-item :label="$t('menuManage.language3')">
                <el-input style="width: 360px;"
                          size="small"
                          clearable
                          v-model="goodsForm.de_name"></el-input>
              </el-form-item>

              <!-- 菜品限制份数 -->
              <el-form-item :label="$t('menuManage.kitchenimpose')">
                <el-input style="width: 360px;"
                          size="small"
                          prop="limit_num"
                          clearable
                          v-model="goodsForm.limit_num"></el-input>
              </el-form-item>

              <!-- 菜品单价 -->
              <el-form-item :label="$t('menuManage.foodPrice')"
                            prop="cost"
                            :rules="[ {required: true, message: $t('menuManage.emptyFoodPrice'),
                            trigger: 'blur'} ]">
                <el-input style="width: 360px;"
                          size="small"
                          clearable
                          v-model="goodsForm.cost"></el-input>
              </el-form-item>

              <!-- 日库存 -->
              <el-form-item :label="$t('menuManage.daysInventory')"
                            prop="count"
                            :rules="[ {required: true, message: $t('menuManage.emptyDaysInventory'),
                            trigger: 'blur'} ]">
                <el-input style="width: 360px;"
                          size="small"
                          clearable
                          v-model="goodsForm.count"></el-input>
              </el-form-item>
              <!-- 产品号 -->
              <el-form-item :label="$t('menuManage.productNum')"
                            prop="name">
                <el-input style="width: 360px;"
                          size="small"
                          clearable
                          v-model="goodsForm.product_id"></el-input>
              </el-form-item>
              <!-- 特殊类型-->
              <el-form-item :label="$t('menuManage.specialtype')"
                            prop="name">
                <el-select style="width: 360px;"
                           size="small"
                           clearable
                           v-model="goodsForm.specialtype"
                           :placeholder="$t('menuManage.category')">
                  <el-option :label="$t('menuManage.commontype')"
                             :value="0">
                  </el-option>

                  <el-option :label="$t('menuManage.drinkstype')"
                             :value="1">
                  </el-option>
                  <el-option :label="$t('menuManage.aduitprice')"
                             :value="2">
                  </el-option>
                  <el-option :label="$t('menuManage.children')"
                             :value="3">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <!-- 图片 -->

          <div class="first-right">
            <div class="good-img">
              <div v-if="imgFront.src">
                <div class="good-img-name">
                  {{imgFront.name}}
                </div>
                <img src="../../assets/imgs/del.png"
                     width="30"
                     height="30"
                     class="good-img-del"
                     @click="fileDel">
                <img :src="imgFront.src"
                     width="250"
                     height="164">
              </div>
              <img v-else-if="newImg"
                   :src="newImg"
                   width="250"
                   height="164">
              <img v-else-if="goodsForm.img"
                   :src="goodsForm.img"
                   width="250"
                   height="164">
              <span v-else>{{$t('menuManage.imgSizeRequirement')}}</span>
              <input @change="fileChange($event)"
                     type="file"
                     id="upload_file"
                     multiple
                     style="display: none" />
            </div>
            <div class="good-img-op">
              <el-button size="small"
                         style="margin-bottom: 22px;"
                         @click="fileClick">{{$t('common.selectFile')}}
              </el-button>
              <el-button size="small"
                         type="primary"
                         style="margin-bottom: 22px;"
                         @click="uploadImg"
                         :disabled="!imgFront.src">{{$t('menuManage.uploadImg')}}
              </el-button>
              <!--<el-button type="danger">删除图片</el-button>-->
            </div>
          </div>

        </div>
        <div class="combo">
          <div class="second-left">{{$t('menuManage.setmenu')}}</div>
          <div class="second-right">
            <div class="combo-food"
                 v-if="item.state === 1"
                 v-for="item in goodsForm.goods_gift"
                 :key="item.gif_id+'c'">
              <el-input style="width: 300px"
                        size="small"
                        :placeholder="$t('menuManage.enterthemenu')"
                        clearable
                        v-model="item.gift_goodsname" />
              <el-input style="width: 300px"
                        size="small"
                        :placeholder="$t('menuManage.enterthemenuNamber')"
                        clearable
                        v-model="item.goods_amount" />
              <el-button size="small"
                         @click="item.state = 2">{{$t('menuManage.delete')}}
              </el-button>
            </div>
            <div class="combo-wrapper"
                 v-if="isShowCombo">
              <div class="search-close">
                <el-input style="width: 400px"
                          :placeholder="$t('common.search')"
                          clearable
                          v-model="searchFood">
                  <template slot="append"><span @click="getAllFoods()">{{$t('common.search')}}</span></template>
                </el-input>
                <el-button @click="isShowCombo = false">{{$t('menuManage.close')}}</el-button>
              </div>
              <div class="all-foods">
                <div class="foods-list">
                  <div class="food"
                       v-for="food in allFoods"
                       :key="food.id+'d'">
                    <div class="food-name">{{food.name}}</div>
                    <div class="food-price">{{$t('menuManage.pricefood')}}{{food.cost}}</div>
                    <el-button size="small"
                               type="primary"
                               @click="addCombo(food)">{{$t('menuManage.talentshow')}}
                    </el-button>
                  </div>
                </div>
                <el-pagination background
                               @current-change="handleCurrentChangeAllFoods"
                               :current-page="allPage.num"
                               :page-size="allPage.size"
                               :total="allPage.total"
                               layout="prev, pager, next">
                </el-pagination>
              </div>
            </div>
            <el-button v-else
                       type="primary"
                       size="small"
                       @click="openCombo()">{{$t('menuManage.addsetmeal')}}
            </el-button>
          </div>
        </div>
        <!-- 规格 -->
        <div class="add-good-second">
          <div class="second-left">{{$t('menuManage.setmeal')}}</div>
          <div class="second-right">
            <div class="specification"
                 v-if="item.state === 1"
                 v-for="(item, index) in goodsForm.goods_spec"
                 :key="index+'e'">
              <el-input style="width: 300px"
                        size="small"
                        :placeholder="$t('menuManage.inputOptionClass')"
                        clearable
                        v-model="item.title">
                <el-button style="width: 80px;margin: -10px"
                           slot="append"
                           icon="el-icon-delete"
                           @click="deleteGoodSku(item)"></el-button>
              </el-input>
              <el-button class="button-new-tag"
                         @click="addOption(item.goods_spec_item, item.id)">{{$t('menuManage.clickAddoption')}}
              </el-button>
              <div style="margin-top: 5px;">
                <div v-if="tag.state === 1"
                     style="display: flex;align-items:center;"
                     v-for="(tag, tagIndex) in item.goods_spec_item"
                     :key="tagIndex+'f'">
                  <el-input v-model="tag.title"
                            :placeholder="$t('menuManage.optionname')"></el-input>
                  <el-input v-model="tag.add_price"
                            :placeholder="$t('menuManage.optionprice')"></el-input>
                  <el-input v-model="tag.print_area"
                            :placeholder="$t('menuManage.optionremarks')"></el-input>
                  <el-button @click="deleteOption(tag)">{{$t('menuManage.delete')}}</el-button>
                </div>
              </div>
            </div>
            <div>
              <!-- 添加新规格 -->
              <el-button type="primary"
                         size="small"
                         @click="addGoodSku">{{$t('menuManage.addspecifications')}}
              </el-button>
            </div>
          </div>
        </div>
        <div class="add-good-third"
             id="zj-add-good-third">
          <!-- 上架状态 -->
          <div class="good-set">
            <div class="good-set-name">
              {{$t('menuManage.status')}}
            </div>
            <div style="line-height: 33px;">
              <el-radio style="margin-right: 80px;"
                        v-model="goodsForm.is_live"
                        :label=1>{{$t('menuManage.active')}}
              </el-radio>
              <el-radio v-model="goodsForm.is_live"
                        :label=0>{{$t('menuManage.inactive')}}
              </el-radio>
            </div>
          </div>
          <!-- 专供 -->
          <div class="good-set">
            <div class="good-set-name">
              {{$t('menuManage.supplystatus')}}
            </div>
            <div style="line-height: 33px;">
              <el-radio v-model="goodsForm.foodtype"
                        :label=1> {{$t('menuManage.alldaysupply')}}

              </el-radio>
              <el-radio v-model="goodsForm.foodtype"
                        :label=2> {{$t('menuManage.lunchservice')}}

              </el-radio>
              <el-radio v-model="goodsForm.foodtype"
                        :label=3> {{$t('menuManage.dinnerservice')}}

              </el-radio>
            </div>
          </div>
          <!-- 销售星期 -->
          <div class="good-set">
            <div class="good-set-name">
              {{$t('menuManage.soldWeek')}}
            </div>
            <div style="line-height: 33px;">
              <el-checkbox-group v-model="goodsForm.weeks">
                <el-checkbox label="1">{{$t('menuManage.Monday')}}</el-checkbox>
                <el-checkbox label="2">{{$t('menuManage.Tuesday')}}</el-checkbox>
                <el-checkbox label="3">{{$t('menuManage.Wednesday')}}</el-checkbox>
                <el-checkbox label="4">{{$t('menuManage.Thursday')}}</el-checkbox>
                <el-checkbox label="5">{{$t('menuManage.Friday')}}</el-checkbox>
                <el-checkbox label="6">{{$t('menuManage.Saturday')}}</el-checkbox>
                <el-checkbox label="0">{{$t('menuManage.Sunday')}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <!-- 销售时间段 -->
          <div class="good-set"
               style="height: 117px;">
            <div class="good-set-name">
              {{$t('menuManage.soldTime')}}
            </div>
            <div style="line-height: 33px; width: 700px;">
              <el-checkbox-group v-model="goodsForm.hours">
                <el-checkbox label="1">01:00</el-checkbox>
                <el-checkbox label="2">02:00</el-checkbox>
                <el-checkbox label="3">03:00</el-checkbox>
                <el-checkbox label="4">04:00</el-checkbox>
                <el-checkbox label="5">05:00</el-checkbox>
                <el-checkbox label="6">06:00</el-checkbox>
                <el-checkbox label="7">07:00</el-checkbox>
                <el-checkbox label="8">08:00</el-checkbox>
                <el-checkbox style="margin-left: 0;"
                             label="9">09:00
                </el-checkbox>
                <el-checkbox label="10">10:00</el-checkbox>
                <el-checkbox label="11">11:00</el-checkbox>
                <el-checkbox label="12">12:00</el-checkbox>
                <el-checkbox label="13">13:00</el-checkbox>
                <el-checkbox label="14">14:00</el-checkbox>
                <el-checkbox label="15">15:00</el-checkbox>
                <el-checkbox label="16">16:00</el-checkbox>
                <el-checkbox style="margin-left: 0;"
                             label="17">17:00
                </el-checkbox>
                <el-checkbox label="18">18:00</el-checkbox>
                <el-checkbox label="19">19:00</el-checkbox>
                <el-checkbox label="20">20:00</el-checkbox>
                <el-checkbox label="21">21:00</el-checkbox>
                <el-checkbox label="22">22:00</el-checkbox>
                <el-checkbox label="23">23:00</el-checkbox>
                <el-checkbox label="0">24:00</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <div class="add-good-four">
          <div style="margin-bottom: 20px;">
            <!-- 所在分类 -->
            <div class="good-set-name"
                 style="display: inline-block;width: 80px;">{{$t('menuManage.category')}}
            </div>
            <el-select style="width: 360px;"
                       size="small"
                       clearable
                       v-model="goodsForm.typeid"
                       :placeholder="$t('menuManage.category')">
              <el-option v-for="item in placeclassify"
                         :key="item.id+'g'"
                         :label="item.name"
                         :value="parseInt(item.id)">
              </el-option>
            </el-select>
            <!-- 打印机 -->

            <div class="good-set-name manageprinter"
                 style="display: inline-block;padding: 0 34px">{{$t('menuManage.printer')}}
            </div>
            <el-input size="small"
                      style="width: 356px;"
                      clearable
                      v-model="goodsForm.printer"
                      :placeholder="$t('menuManage.printer')"></el-input>

          </div>
          <div style="display: flex;margin-bottom: 20px;">
            <!-- 商品备注 -->
            <div class="good-set-name manageprinter"
                 style="flex: 0 0 80px;height: 32px;line-height: 32px;">{{$t('menuManage.foodRemarks')}}
            </div>
            <el-input size="small"
                      v-model="goodsForm.remarks"
                      clearable
                      :placeholder="$t('menuManage.foodRemarks')"></el-input>
          </div>

          <div style="display: flex;margin-bottom: 20px;">
            <!-- 商品描述-->
            <div class="good-set-name"
                 style="flex: 0 0 80px;height: 32px;line-height: 32px;">{{$t('menuManage.foodIntro')}}
            </div>
            <el-input size="small"
                      v-model="goodsForm.instro"
                      clearable
                      :placeholder="$t('menuManage.foodIntro')"></el-input>
          </div>
          <div style="display: flex;margin-bottom: 20px;">
            <!-- 语言一商品描述-->
            <div class="good-set-name"
                 style="flex: 0 0 80px;height: 32px;line-height: 32px;">{{$t('menuManage.languagecommodity1')}}
            </div>
            <el-input size="small"
                      v-model="goodsForm.zh_desc"
                      clearable
                      :placeholder="$t('menuManage.language1')"></el-input>
          </div>
          <div style="display: flex;margin-bottom: 20px;">
            <!-- 语言二商品描述-->
            <div class="good-set-name"
                 style="flex: 0 0 80px;height: 32px;line-height: 32px;">{{$t('menuManage.languagecommodity2')}}
            </div>
            <el-input size="small"
                      v-model="goodsForm.en_desc"
                      clearable
                      :placeholder="$t('menuManage.language2')"></el-input>
          </div>
          <div style="display: flex;margin-bottom: 20px;">
            <!-- 语言三商品描述-->
            <div class="good-set-name"
                 style="flex: 0 0 80px;height: 32px;line-height: 32px;">{{$t('menuManage.languagecommodity3')}}
            </div>
            <el-input size="small"
                      v-model="goodsForm.de_desc"
                      clearable
                      :placeholder="$t('menuManage.language3')"></el-input>
          </div>
        </div>
        <div style="height: 80px;line-height: 80px;text-align: center">
          <el-button @click="judgeDialog">{{$t('menuManage.submit')}}</el-button>
        </div>
      </div>
    </div>
    <!-- 回收站 -->
    <el-dialog :title="$t('menuManage.recycle')"
               :visible.sync="isShowRecycle">
      <el-table :data="recycleData">
        <el-table-column width="150px"
                         property="product_id"
                         :label="$t('common.operation')"></el-table-column>
        <el-table-column property="name"
                         :label="$t('common.operation')"></el-table-column>
        <el-table-column property="cost"
                         :label="$t('common.price')"></el-table-column>
        <el-table-column width="150px"
                         :label="$t('common.operation')">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       @click="restoreGood(scope.row)">{{$t('menuManage.recovery')}}
            </el-button>
            <el-button style="margin-left: 30px;"
                       @click="deepDelGood(scope.row)"
                       type="text"
                       size="small"><span style="color: red">{{$t('menuManage.eeletecompletely')}}</span></el-button>
            <el-tooltip class="item"
                        effect="dark"
                        :content="$t('menuManage.isOpenTakeOut')"
                        placement="top">
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: center;margin-top: 10px"
                     background
                     @current-change="handleCurrentRecycleChange"
                     :current-page="recyclePage.num"
                     :page-size="recyclePage.size"
                     :total="recyclePage.total"
                     layout="prev, pager, next">
      </el-pagination>
    </el-dialog>

    <div>
      <el-dialog :title="$t('menuManage.tips')"
                 :visible.sync="dialogVisible"
                 width="30%"
                 :before-close="handleClose">
        <el-input v-model="newlyincreasedname"
                  :placeholder="$t('menuManage.Pleaseenterthenewcategoryname')">
        </el-input>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="dialogVisible = false">{{$t('common.cancel')}}</el-button>
          <el-button type="primary"
                     @click="copysubmit">{{$t('common.confirm')}}</el-button>
        </span>
      </el-dialog>
      <el-row>

      </el-row>

    </div>
  </div>
  <!-- /菜单管理 -->

</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'MenuManage',

  data () {
    return {
      placeclassify: [],//编辑的二级分类
      chlildfresh: {},//二级菜单的信息
      fatherfresh: false,//分类回收刷新
      secondrefresh: false,//二级菜单回收刷新
      secondlevelId: '',//二级菜单id
      parentlevelId: true,//默认可以打开一级菜单
      childstype: '',
      languagesdescribe: false,
      form: {
        name1: '',
        name2: '',
        name3: '',
        name4: '',
        name5: ''
      },
      childsIndex: '',
      openChildOperator:'..',
      childsoperation: false,
      allproduct: '',
      pop_up: false,
      parent_id: '',
      sizeForm: {
        name: '',
      },
      newchild: true,

      searchFood: '',
      isOpenHandle: false, // 是否开启分类操作
      isOpenIndex: 0, // 开启操作的分类索引
      loading: false, // 分类列表加载
      goodsType: [], // 菜单分类
      activeIndex: 0, // 选中的分类
      goodsData: [], // 分类下的菜品
      goodsDataLoading: false, // 菜品加载
      newClass: '', // 新增分类
      editingClass: {}, // 被编辑的分类
      searchGood: '', // 搜索菜品
      editTypeIndex: 0,
      isEditType: false,
      goodsVisible: false, // 是否显示菜品dialog
      hours: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '0'],
      weeks: ['1', '2', '3', '4', '5', '6', '0'],
      // dialog菜品对象
      goodsForm: {
        hours: [],
        weeks: [],
        goods_spec: []
      },
      page: {
        num: 1, // 分页页码
        size: 10, // 分页条数
        sizes: [10, 20, 50, 100], // 条数选择
        total: 0 // 总条数
      },
      size: 0, // 图片大小
      imgFront: {},
      newImg: '',
      goodsVisibleTitle: '', // 菜品Dialog标题
      inputVisible: false,
      inputIndex: '',
      inputValue: '',
      editable: [],
      allFoods: [],
      allPage: {
        num: 1, // 分页页码
        size: 5, // 分页条数
        total: 0 // 总条数
      },
      isShowCombo: false,
      isShowRecycle: false,
      recycleData: [],
      recyclePage: {
        num: 1, // 分页页码
        size: 10, // 分页条数
        total: 0 // 总条数
      },
      dialogVisible: false,
      newlyincreasedname: '',
      copyshopId: '',
      copyid: '',
      childColorIndex:'', //二级菜单选中颜色
      
    }
  },

  props: {},

  components: {
    draggable
  },
  async created () {
    //  获取菜品列表
    this.loading = true
    const res = await this.$axios.get(`${this.$REQ_URL}shopcenter&action=get_goodstype&shopid=${sessionStorage.getItem('shopId')}`)
    this.goodsType = res.data.data

    for (let i = 0; i < this.goodsType.length; i++) {
      this.placeclassify.push(this.goodsType[i])
      if (this.goodsType[i].child.length > 0) {
        for (let j = 0; j < this.goodsType[i].child.length; j++) {
          this.placeclassify.push(this.goodsType[i].child[j])
        }

      }
    }


    this.loading = false
    if (res.data.state === 1) {
      this.getGoods(res.data.data[0])
    }
    this.getRecycleList()
  },

  mounted () {
    // 为了防止火狐浏览器拖拽的时候以新标签打开
    document.body.ondrop = function (event) {
      event.preventDefault()
      event.stopPropagation()
    }
  },

  watch: {},

  computed: {},

  filters: {
    // 格式化默认类型
    formatDefaultType (goodsType) {
      
      switch (goodsType) {
        case 1:
          return goodsType * 1
        case 2:
          return goodsType * 2
        case 3:
          return goodsType * 3
        case '':
          return goodsType * 0
      }
    }
  },

  methods: {

    // 新增二级分类弹框
    newchilds (id) {
      this.pop_up = true
      this.parent_id = id
      this.$prompt('请输入二级菜单名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: '',
        inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {

        this.$axios.get(`${this.$REQ_URL}shopcenter&action=newsavegoodstype`, {
          params: {
            parent_id: this.parent_id,
            name: value,
            shopid: sessionStorage.getItem('shopId')
          }
        }).then(res => {
          if (res.data.state == '1') {
            this.pop_up = false
            this.getGoodsType()
          } else {
            this.$message({
              type: 'success',
              message: '你的二级菜单是: ' + res.data.msg
            });
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消添加二级菜单'
        });
      });
    },
    // 提交新增二级菜单




    // 打开二菜单类操作
    Openchilds (index) {
     this.openChildOperator=index
      this.childsIndex = index
      this.childsoperation = true
    },
    // 取消二级菜单操作
    closechilds () {
      this.childsoperation = false
      this.openChildOperator ='..'
    },


    handleOpen (key, keyPath) {
    
    },
    handleClose (key, keyPath) {

    },



    openRecycle () {
      this.isShowRecycle = true
      this.getRecycleList()
    },
    //  恢复菜品
    restoreGood (good) {
      this.$axios.get(`${this.$REQ_URL}shopcenter&action=regaingoods&id=${good.id}&shopid=${sessionStorage.getItem('shopId')}`
      ).then(res => {
        if (res.data.state === 200) {
          this.$message({
            type: 'success',
            message: '恢复成功'
          })
          this.getRecycleList(this.recyclePage.num)
          this.getGoods(this.goodsType[this.activeIndex], this.activeIndex, this.page.num)
        }
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '网络超时，恢复失败'
        })
      })
    },
    //  彻底删除菜品
    deepDelGood (good) {
      this.$confirm(`此操作将彻底删除菜品:${good.name}`, this.$t('common.prompt'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel')
      }).then(() => {
        this.$axios.get(`${this.$REQ_URL}shopcenter&action=delrecover&id=${good.id}&shopid=${sessionStorage.getItem('shopId')}`
        ).then(res => {
          if (res.data.state === 200) {
            this.$message({
              type: 'success',
              message: this.$t('common.successDelete')
            })
            this.getRecycleList(this.recyclePage.num)
          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: this.$t('common.failedDelete')
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('common.cancelDelete')
        })
      })
    },
    //  获取回收列表
    getRecycleList (pageNum = 1) {
      this.$axios.get(`${this.$REQ_URL}shopcenter&action=recoverlist&shopid=${sessionStorage.getItem('shopId')}&page=${pageNum}&pagesize=${this.recyclePage.size}`
      ).then(res => {
        if (res.data.state === 1) {
          this.recycleData = res.data.data.recover_list
          this.recyclePage.total = res.data.data.records
        }
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '网络超时，获取失败'
        })
      })
    },
    addCombo (food) {
      let foundFood = this.goodsForm.goods_gift.find(item => item.goods_id === food.id)
      if (foundFood) {
        this.$message({
          type: 'error',
          message: '该菜品已经添加，请直接修改数量'
        })
      } else {
        let comboOption = {
          gift_goodsname: food.name,
          goods_amount: 1,
          goods_id: food.id,
          state: 1
        }
        this.goodsForm.goods_gift.push(comboOption)
      }
    },
    openCombo () {
      this.isShowCombo = true
      this.getAllFoods()
    },
    // 获取所有菜品
    getAllFoods (pageNum = 1) {
      let urlParam = `&shopid=${sessionStorage.getItem('shopId')}&page=${pageNum}&pagesize=${this.allPage.size}`
      if (this.searchFood) {
        urlParam += `&goods_name=${this.searchFood}`
      }
      this.$axios.get(`${this.$REQ_URL}shopcenter&action=get_allgoods${urlParam}`
      ).then(res => {
        if (res.data.state === 1) {
          this.allFoods = res.data.data.order_list
          this.allPage.total = res.data.data.records
        } else if (res.data.state === -1) {
          this.$message({
            type: 'error',
            message: '没有搜索到相关菜品'
          })
          this.allFoods = res.data.data.order_list
          this.allPage.total = res.data.data.records
        }
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '网络超时，获取失败'
        })
      })
    },
    // 修改菜品排序
    changeGoodSort (good) {
      const regPos = /^[0-9]+.?[0-9]*$/  // 判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/
      if (!regPos.test(good.good_order)) {
        this.$message({
          type: 'warning',
          message: this.$t('请输入正确的数字')
        })
      } else {
        this.$axios.get(`${this.$REQ_URL}shopcenter&action=goods_order&id=${good.id}&good_order=${good.good_order}`).then(res => {
          if (res.data.state === 200) {
            this.$message({
              message: res.data.msg,
              type: 'success'
            })
            this.getGoods(this.goodsType[this.activeIndex], this.activeIndex, this.page.num)
          }
        }).catch(() => {
          this.$message({
            message: this.$t('menuManage.failedClass'),
            type: 'error'
          })
        })
      }
    },

    // 点击修改序号
    changeNumber (row) {
      this.editable[row] = true
      this.$set(this.editable, row, true)
    },

    // 获取分类
    getGoodsType () {
      this.loading = true
      this.$axios.get(`${this.$REQ_URL}shopcenter&action=get_goodstype&shopid=${sessionStorage.getItem('shopId')}`).then(res => {
        this.goodsType = res.data.data
        this.loading = false
      }).catch(() => {
        this.$message({
          message: this.$t('menuManage.failedClass'),
          type: 'error'
        })
      })
    },
    // 二级菜单拖拽
    childerdragTypeSort(typeArr){
      this.childsoperation = false
      this.openChildOperator = '..'

      this.$axios.post(`${this.$REQ_URL}shopcenter&action=newsavepx&shopid=${sessionStorage.getItem('shopId')}`, typeArr
      ).then(res => {
        if (res.data.state === 1) {
          this.$message({
            message: this.$t('menuManage.successSort'),
            type: 'success'
          })
        }
        this.getGoodsType()
      }).catch(() => {
        this.$message({
          message: this.$t('menuManage.failedSort'),
          type: 'error'
        })
      })
    },
    // 拖拽分类排序
    dragTypeSort (e) {
        this.activeIndex = e.newIndex
      this.$axios.post(`${this.$REQ_URL}shopcenter&action=newsavepx&shopid=${sessionStorage.getItem('shopId')}`, this.goodsType
      ).then(res => {
        if (res.data.state === 1) {
          this.$message({
            message: this.$t('menuManage.successSort'),
            type: 'success'
          })
        }
        this.getGoodsType()
      }).catch(() => {
        this.$message({
          message: this.$t('menuManage.failedSort'),
          type: 'error'
        })
      })
    },

    // 新增分类
    addType () {
      if (this.newClass === '') {
        this.$message.error(this.$t('menuManage.emptyClassName'))
      } else {
        this.$axios.get(`${this.$REQ_URL}shopcenter&action=newsavegoodstype`, {
          params: {
            name: this.newClass,
            shopid: sessionStorage.getItem('shopId')
          }
        }
        ).then(res => {
          if (res.data.state === 1) {
            this.$message({
              message: this.$t('menuManage.successAddClass'),
              type: 'success'
            })
            this.getGoodsType()
          } else if (res.data.state === -1) {
            this.$message({
              message: '该分类已存在',
              type: 'error'
            })
          }
          this.newClass = ''
        }).catch(_ => {
          this.$message({
            message: this.$t('menuManage.failedAdd'),
            type: 'error'
          })
        })
      }
    },

    // 删除分类
    deleteType (type) {
      this.$confirm(`${this.$t('menuManage.deleteClassPrompt')}:${type.name}`, this.$t('common.prompt'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel')
      }).then(() => {
        this.$axios.get(`${this.$REQ_URL}shopcenter&action=newdelgoodstype&id=${type.id}&shopid=${sessionStorage.getItem('shopId')}`
        ).then(res => {
          if (res.data.state === 1) {
            this.childsoperation = false
            this.$message({
              type: 'success',
              message: this.$t('common.successDelete')
            })
            this.getGoodsType()
            this.openChildOperator='..'
          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: this.$t('common.failedDelete')
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('common.cancelDelete')
        })
      })
    },
    // 删除二级菜单
    deletechildsType (type) {
      this.deleteType(type)
    },


    // 修改二级菜单
    editchilds (childstype) {

      this.form.name5 = childstype.type_desc
      this.form.name2 = childstype.en_name
      this.form.name3 = childstype.zn_name
      this.form.name4 = childstype.de_name
      this.form.name1 = childstype.name

      this.childstype = childstype
      this.languagesdescribe = true
    },
    // 立即创建
    onSubmit () {

      this.$axios.get(`${this.$REQ_URL}shopcenter&action=neweditgoodstype`, {
        params: {
          shopid: sessionStorage.getItem('shopId'),
          id: this.childstype.id,
          name: this.form.name1,
          type_desc: this.form.name5,
          en_name: this.form.name2,
          zn_name: this.form.name3,
          de_name: this.form.name4
        }
      }
      ).then(res => {

        if (res.data.state == '1') {
          this.childsoperation = true
          this.languagesdescribe = false

          this.getGoodsType()

        }
      })

    },
    // 取消二级菜单
    offSubmit () {
      this.languagesdescribe = false

    },

    // 复制二级菜单
    copychilds (childitem, index) {
      this.copyshopId = sessionStorage.getItem('shopId')
      this.copyid = childitem.id
      this.dialogVisible = true
    },




    // 编辑分类
    editType (type, index) {
      this.newchild = false
      this.editTypeIndex = index
      this.isEditType = true
      this.newnameshow = false
    },


    // 打开二级菜单
    childType (type, index) {
    
      this.goodsForm.typeid = type.id
      this.parentlevelId = false
      this.secondlevelId = type.id
   
      this.chlildfresh = type
      // fatherfresh:false,//分类回收刷新
      // secondrefresh//二级分类刷新
      // this.fatherfresh = false
      this.secondrefresh = true
      this.childsoperation = false
      if (this.allproduct === type) {
        return
      } else {
        this.allproduct = type
      }
      this.activeIndex = index
      if (this.searchGood) {
        this.searchGood = ''
      }
      //  切换分类页数为1
      this.page.num = 1
      this.getGoods(type, index)
    },

    changeType (type, index) {
      this.parentlevelId = true
      this.secondrefresh = false
      if (this.allproduct === type) {
        return
      } else {
        this.allproduct = type
      }

      this.activeIndex = index
      if (this.searchGood) {
        this.searchGood = ''
      }
      //  切换分类页数为1
      this.page.num = 1
      this.getGoods(type, index)
    },
    //  获取分类下的菜品
    getGoods(type, index = 0, pageNum = 1) {
      this.goodsDataLoading = true
      let urlParam = `&shopid=${sessionStorage.getItem('shopId')}&page=${pageNum}&pagesize=${this.page.size}`
      if (this.searchGood) {
        this.page.num = pageNum
        urlParam += `&goods_name=${this.searchGood}`
        this.activeIndex = ''
      } else {
        urlParam += `&typeid=${type.id}`
      }
      this.$axios.get(`${this.$REQ_URL}shopcenter&action=get_goods${urlParam}`
      ).then(res => {
        if (res.data.state === 1) {
          let arr = this.goodsData = res.data.data.order_list
          let len = arr.length
          this.editable = new Array(len)
          this.page.total = res.data.data.records
        } else {
          this.goodsData = []
        }
        this.goodsDataLoading = false
      }).catch(() => {
        this.$message({
          type: 'error',
          message: this.$t('menuManage.failedFood')
        })
      })
    },

    // 开启操作
    OpenHandle (type, index) {
      this.isOpenIndex = index
      this.isOpenHandle = true
      this.editingClass = { ...type }
    },

    // 关闭操作
    closeHandle () {
      this.newchild = true
      this.isOpenHandle = false
      if (this.isEditType) {
        this.isEditType = false
      }
    },

    // 删除商品
    deleteGood (good) {
      this.$confirm(`此操作将回收菜品:${good.name}`, this.$t('common.prompt'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel')
      }).then(() => {
        this.$axios.get(`${this.$REQ_URL}shopcenter&action=newdelgoods&id=${good.id}&shopid=${sessionStorage.getItem('shopId')}`
        ).then(res => {
          if (res.data.state === 200) {
            this.$message({
              type: 'success',
              message: '回收成功'
            })
            this.fatherfresh = false
            this.secondrefresh
            if (this.secondrefresh) {
              this.getGoods(this.chlildfresh, this.activeIndex, this.page.num)
            } else {
               this.getGoods(this.goodsType[this.activeIndex], this.activeIndex, this.page.num)
              this.allproduct = ''
            }

          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '回收失败'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('common.cancelDelete')
        })
      })
    },

    // 选择每页显示多少条数据
    handleSizeChange (size) {
      this.page.size = size
      // this.getGoods(this.goodsType[this.activeIndex], this.activeIndex, this.page.num)

      if (this.secondrefresh) {
        this.getGoods(this.chlildfresh, this.activeIndex, this.page.num)
      } else {
        this.getGoods(this.goodsType[this.activeIndex], this.activeIndex, this.page.num)
        this.allproduct = ''
      }
    },

    // 选择第几页数据
    handleCurrentChange (page) {
      this.page.num = page
      // this.getGoods(this.goodsType[this.activeIndex], this.activeIndex, this.page.num)

      if (this.secondrefresh) {
        this.getGoods(this.chlildfresh, this.activeIndex, this.page.num)
      } else {
        this.getGoods(this.goodsType[this.activeIndex], this.activeIndex, this.page.num)
        this.allproduct = ''
      }
    },

    handleCurrentRecycleChange (page) {
      this.recyclePage.num = page
      this.getRecycleList(page)
    },
    // 选择第几页数据
    handleCurrentChangeAllFoods (page) {
      this.allPage.num = page
      this.getAllFoods(this.allPage.num)
    },

    // 上传图片
    uploadImg () {
      this.$axios.post(`${this.$IMG_REQ_URL}shopcenter&action=addgoodsimg`, {
        img: this.imgFront.src.split(',')[1],
        shopid: sessionStorage.getItem('shopId')
      }).then(res => {
        if (res.data.state === 200) {
          this.goodsForm.img = res.data.img_url
          this.newImg = res.data.img_url
          this.imgFront = {}
          this.$message({
            type: 'success',
            message: this.$t('menuManage.successUpload')
          })
        }
      }).catch(() => {
        this.$message({
          type: 'error',
          message: this.$t('menuManage.failedUpload')
        })
      })
    },
    fileChange (el) {
      if (!el.target.files[0].size) return
      this.fileList(el.target)
      el.target.value = ''
    },
    fileClick () {
      document.getElementById('upload_file').click()
    },
    fileAdd (file) {
      if (this.limit !== undefined) this.limit--
      if (this.limit !== undefined && this.limit < 0) return
      this.size = this.size + file.size
      if (file.type.indexOf('image') === -1) {
        file.src = 'wenjian.png'
        this.imgFront = file
      } else {
        let reader = new FileReader()
        let image = new Image()
        let _this = this

        reader.readAsDataURL(file)
        reader.onload = function () {
          file.src = this.result
   
          image.onload = function () {
            let width = image.width
            let height = image.height
            file.width = width
            file.height = height
            // _this.imgList.push({
            //   file
            // });
            _this.imgFront = file
          }
          image.src = file.src
        }
      }
    },
    fileList (fileList) {
      let files = fileList.files
      for (let i = 0; i < files.length; i++) {
        //  判断是否为文件夹
        if (files[i].type !== '') {
          this.fileAdd(files[i])
        } else {
          //  文件夹处理
          this.folders(fileList.items[i])
        }
      }
    },
    // 文件夹处理
    folders (files) {
      let _this = this
      if (files.kind) {
        files = files.webkitGetAsEntry()
      }
      files.createReader().readEntries(function (file) {
        for (let i = 0; i < file.length; i++) {
          if (file[i].isFile) {
            _this.foldersAdd(file[i])
          } else {
            _this.folders(file[i])
          }
        }
      })
    },
    foldersAdd (entry) {
      let _this = this
      entry.file(function (file) {
        _this.fileAdd(file)
      })
    },
    // 删除图片
    fileDel () {
      this.size = this.size - this.imgFront.size
      this.imgFront = {}
      if (this.limit !== undefined) this.limit = this.imgFront.length
    },
    // 编辑商品
    editGood (good) {
      this.goodsVisibleTitle = this.$t('menuManage.editFood')
      this.goodsVisible = true
      this.goodsForm = { ...good }
      this.goodsForm.weeks = this.goodsForm.weeks !== '' ? (this.goodsForm.weeks.toString()).split(',') : []
      this.goodsForm.hours = this.goodsForm.hours !== '' ? (this.goodsForm.hours.toString()).split(',') : []
      this.goodsForm.cost = this.goodsForm.cost.toLocaleString('de')
      if (!this.goodsForm.goods_spec) {
        this.goodsForm.goods_spec = []
      }
    },

    addGoodSku () {
      this.goodsForm.goods_spec.push({
        goods_spec_item: [],
        state: 1
      })
    },
    addOption (options, id) {
      options.push({
        title: '',
        add_price: '',
        specid: id,
        state: 1,
        print_area: ''
      })
    },
    // 删除规格
    deleteGoodSku (item) {
      item.state = 2
      // goodSkus.splice(goodSkus.indexOf(item), 1);
    },
    deleteOption (tag) {
      tag.state = 2
    },
    // 删除标签
    handleClose (tag, tagArr) {
      tagArr.splice(tagArr.indexOf(tag), 1)
    },

    // 添加新规格值显示input
    showInput (index) {
      this.inputIndex = index
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    // 确认添加新规格值
    handleInputConfirm (tagArr) {
      let inputValue = this.inputValue
      if (inputValue) {
        tagArr.push({
          title: inputValue
        })
      }
      this.inputVisible = false
      this.inputValue = ''
    },

    // 关闭新增/编辑菜品Dialog
    closeGoodHandle () {
      this.goodsVisible = false
      this.isShowCombo = false
      this.$refs['goodsForm'].resetFields()
      this.goodsForm = {
        weeks: [],
        hours: [],
        goods_spec: []
      }
    },

    // 打开新增菜品dialog
    openAddGood () {
      this.goodsVisibleTitle = this.$t('menuManage.newFood')
      this.goodsVisible = true
      if (this.parentlevelId) {
        this.goodsForm.typeid = +this.goodsType[this.activeIndex].id
      } else {
        this.goodsForm.typeid = this.secondlevelId
      }
      this.goodsForm.weeks = ['1', '2', '3', '4', '5', '6', '0']
      this.goodsForm.hours = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '0']
      this.goodsForm.is_live = 1
      this.goodsForm.foodtype = 1
    },

    // 判断保存编辑商品还是保存添加商品
    judgeDialog () {
      this.goodsVisibleTitle === this.$t('menuManage.editFood') ? this.saveEditGood() : this.saveAddGood()
    },

    // 保存添加菜品
    saveAddGood () {
      this.$refs['goodsForm'].validate((valid) => {
        if (!valid) {
          return
        }
        let goodsSpec = true
        this.goodsForm.goods_spec.forEach(item => {
          if (!item.title && item.state === 1) {
            this.$message({
              type: 'info',
              message: '套餐分类不能为空'
            })
            goodsSpec = false
          } else if (!item.goods_spec_item.length && item.state === 1) {
            this.$message({
              type: 'info',
              message: '选项不能为空'
            })
            goodsSpec = false
          }
        })
        if (!goodsSpec) {
          return
        }
        if (!this.goodsForm.is_live) {
          this.$message({
            type: 'info',
            message: this.$t('menuManage.selectStatus')
          })
          return
        }
        let { weeks, hours, cost, ...other } = this.goodsForm
        this.$axios.post(`${this.$REQ_URL}shopcenter&action=newaddgoods`, {
          weeks: weeks.toString(),
          hours: hours.toString(),
          cost: cost.replace(/,/g, '.'),
          ...other,
          shopid: sessionStorage.getItem('shopId')
        }, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          if (res.data.state === 200) {
            this.$message({
              type: 'success',
              message: this.$t('common.successAdd')
            })
            if (this.newImg) {
              this.newImg = ''
            }
            this.goodsForm = {
              weeks: [],
              hours: [],
              goods_spec: []
            }
            this.goodsVisible = false
            this.isShowCombo = false
            this.$refs.goodsForm.resetFields()


            if (this.secondrefresh) {
              this.getGoods(this.chlildfresh, this.activeIndex, this.page.num)
            } else {
              this.getGoods(this.goodsType[this.activeIndex], this.activeIndex, this.page.num)
              this.allproduct = ''
            }

          } else if (res.data.state === 400) {
            this.$message({
              type: 'error',
              message: this.$t('menuManage.failedAdd')
            })
          }
        }).catch(() => {
          this.goodsVisible = false
          this.$message({
            type: 'error',
            message: this.$t('menuManage.failedAdd')
          })
        })
      })
    },

    // 保存编辑菜品
    saveEditGood () {
      let goodsSpec = true
      this.goodsForm.goods_spec.forEach(item => {
        if (!item.title && item.state === 1) {
          this.$message({
            type: 'info',
            message: '套餐分类不能为空'
          })
          goodsSpec = false
        } else if (!item.goods_spec_item.length && item.state === 1) {
          this.$message({
            type: 'info',
            message: '选项不能为空'
          })
          goodsSpec = false
        }
      })
      if (!goodsSpec) {
        return
      }
      let { weeks, hours, cost, ...other } = this.goodsForm
      this.$axios.post(`${this.$REQ_URL}shopcenter&action=editgoods`, {
        weeks: weeks.toString(),
        hours: hours.toString(),
        cost: cost.replace(/,/g, '.'),
        ...other
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.data.state === 200) {
          this.$message({
            type: 'success',
            message: this.$t('menuManage.successSave')
          })
          if (this.newImg) {
            this.newImg = ''
          }
          this.goodsForm = {
            weeks: [],
            hours: [],
            goods_spec: [
              {
                goods_spec_item: '',
                goods_spec_value: []
              }
            ]
          }
          this.goodsVisible = false
          this.isShowCombo = false
          this.getGoods(this.goodsType[this.activeIndex], this.activeIndex, this.page.num)
          this.allproduct = ''
        } else if (res.data.state === 400) {
          this.$message({
            type: 'error',
            message: this.$t('menuManage.failedEdit')
          })
        }
      }).catch(() => {
        this.goodsVisible = false
        this.$message({
          type: 'error',
          message: this.$t('menuManage.failedEdit2')
        })
      })
    },

    /**
     * 保存分类操作
     */
    saveHandle () {
      if (!this.editingClass.name) {
        this.$message({
          type: 'warning',
          message: this.$t('menuManage.emptyFoodName')
        })
        return
      }
      this.$axios.get(`${this.$REQ_URL}shopcenter&action=neweditgoodstype`, {
        params: {
          shopid: sessionStorage.getItem('shopId'),
          id: this.editingClass.id,
          name: this.editingClass.name,
          type_desc: this.editingClass.type_desc,
          en_name: this.editingClass.en_name,
          zn_name: this.editingClass.zn_name,
          de_name: this.editingClass.de_name
        }
      }
      ).then(res => {
        if (res.data.state === 1) {
          this.$message({
            type: 'success',
            message: this.$t('menuManage.successSave')
          })
          this.isOpenHandle = false
          if (this.isEditType) {
            this.isEditType = false
          }
          this.getGoodsType()
          this.newchild = true
        }
      }).catch(() => {
        this.$message({
          type: 'error',
          message: this.$t('menuManage.failedSave')
        })
      })
    },

    /**
     * 一键上下架
     * @param {Number} isLive 下架为0，上架为
     */
    putOnSale (isLive) {
      this.$axios.get(`${this.$REQ_URL}shopcenter&action=goodsislive&type_id=${this.goodsType[this.activeIndex].id}&is_live=${isLive}`
      ).then(res => {
        if (res.data.state === 200) {
          this.$message({
            type: 'success',
            message: isLive ? '上架成功' : '下架成功'
          })
          this.getGoods(this.goodsType[this.activeIndex], this.activeIndex, this.page.num)
        }
      }).catch(() => {
        this.$message({
          type: 'error',
          message: isLive ? '上架失败' : '下架失败'
        })
      })
    },
    // 新增复制功能

    copylink (type, index) {
      this.copyshopId = sessionStorage.getItem('shopId')
      this.copyid = type.id
      this.dialogVisible = true
    },

    copysubmit () {
      this.dialogVisible = false
      this.$axios.get(`http://hiroaus.huaqiaobang.com/index.php?ctrl=shopcenter&action=copy_goods&shopid=${this.copyshopId}&typeid=${this.copyid}&name=${this.newlyincreasedname}`).then(res => {
        this.saveHandle()
        this.newlyincreasedname = ''
      })


    }


  }
}
</script>

<style scoped lang="scss">
@import "../../assets/css/mixin";

.menu-manage {
  background: $fc;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
  padding: 0 40px;

  .menu-title {
    background: $fc;
    @include fja();
    height: 80px;
    border-bottom: 1px solid #dedede;

    span {
      text-align: left;
      font-family: PingFang-SC-Semibold;
      font-size: 20px;
      font-weight: bold;
      color: #000;
      letter-spacing: 0;
    }
  }

  .menu-content {
    @include fj();
    background-color: $fc;
    margin-bottom: 40px;
    color: #333;

    aside {
      flex: 0 0 310px;
      -webkit-box-sizing: border-box;
      margin-top: 50px;
      border-right: 1px solid #dedede;
      padding-right: 10px;
      margin-bottom: 40px;
      overflow: hidden;

      .add-btn {
        width: 56px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .class-item-wrapper {
        margin-top: 10px;
        border-bottom: 1px solid #dedede;
        cursor: move;

        .class-item {
          display: flex;
          height: 60px;
          line-height: 60px;
          justify-content: space-between;

          > .el-input-group__append,
          .el-input-group__prepend {
            background-color: #ff8214;
            color: $fc;
            border: none;
          }

          span.class-item-span {
            flex: 1;
            display: inline-block;
            font-family: PingFang-SC-Regular;
            font-size: 16px;
            color: #000;
            letter-spacing: 0;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &.active-class-item {
              font-family: PingFang-SC-Semibold;
              color: #ff8214;
            }

            span {
              cursor: pointer;
            }
          }

          .btn-op {
            // flex: 0 0 95px;
            display: inline-block;
            float: right;
            padding-left: 10px;
            margin-right: 10px;
          }

          .open-handle-btn {
            height: 60px;
            line-height: 60px;
            padding-right: 12px;

            img {
              cursor: pointer;
            }
          }
        }

        .btn-op-wrapper {
          @extend .class-item;
          justify-content: flex-end;
        }
      }
    }

    main {
      flex: 1;
      padding: 50px 0 40px 40px;

      .add-class {
        display: flex;
        justify-content: space-between;
        height: 40px;
        margin-bottom: 10px;

        .btn-arr {
          display: flex;
          justify-content: flex-end;

          .search-goods {
            margin-left: 20px;
            width: 300px;
          }
        }

        > .el-button {
          background-color: #ff8214;
          border-bottom: 1px solid #ff8214;
          color: $fc;
        }

        > .el-input-group__append,
        .el-input-group__prepend {
          background-color: #ff8214;
          color: $fc;
          border: none;
          cursor: pointer;
        }
      }
    }
  }

  .mask-layer {
    position: fixed;
    top: 0;
    left: 0;
    @include wh(100%);
    background-color: #000;
    opacity: 0.3;
    z-index: 10;
  }

  .add-good-dialog-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    z-index: 11;

    .add-good-dialog {
      padding: 0 23px;
      position: relative;
      top: 20px;
      margin: 0 auto 20px;
      background: $fc;
      border-radius: 2px;
      -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 977px;
      z-index: 9999;

      .add-good-title {
        height: 60px;
        line-height: 60px;
        font-family: PingFang-SC-Semibold;
        font-size: 20px;
        color: #000;
        letter-spacing: 0;
        text-align: center;
        font-weight: bold;
        border-bottom: 1px solid #dedede;

        .close-icon {
          height: 60px;
          line-height: 60px;
          float: right;
          color: #c8c8c8;
          font-weight: bold;
          cursor: pointer;
        }
      }

      .add-good-first {
        position: relative;
        height: 740px;
        margin-top: 24px;
        border-bottom: 1px solid #dedede;

        .first-left {
          width: 400px;
          position: absolute;
          left: 0;
        }

        .first-right {
          display: flex;
          position: absolute;
          right: 0;
          height: 164px;
          width: 400px;

          .good-img {
            position: relative;
            height: 164px;
            width: 250px;
            border: 1px solid #dedede;
            border-radius: 2px;
            text-align: center;

            span {
              margin-top: 140px;
              display: inline-block;
              font-family: PingFang-SC-Regular;
              font-size: 14px;
              color: #ff2828;
              letter-spacing: 0;
            }

            .good-img-name {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 50px;
              background-color: rgba(0, 0, 0, 0.4);
              line-height: 50px;
              text-align: left;
              color: $fc;
              font-size: 12px;
              text-indent: 4px;
              @include elli();
            }

            .good-img-del {
              position: absolute;
              top: 10px;
              right: 4px;
              cursor: pointer;
            }
          }

          .good-img-op {
            text-align: right;
          }
        }
      }

      .combo {
        padding-top: 24px;
        display: flex;
        border-bottom: 1px solid #dedede;

        .second-left {
          flex: 0 0 80px;
          height: 32px;
          line-height: 32px;
          font-family: PingFang-SC-Regular;
          font-size: 14px;
          color: #606266;
          letter-spacing: 0;
        }

        .second-right {
          padding-bottom: 18px;

          .combo-food {
            margin-bottom: 10px;
          }

          .combo-wrapper {
            .search-close {
              display: flex;
              justify-content: space-between;
            }

            .all-foods {
              .foods-list {
                display: flex;
                justify-content: space-between;

                .food {
                  flex: 1;
                  padding: 10px;
                  margin: 5px;
                  display: flex;
                  flex-direction: column;
                  border: 1px solid #dedede;

                  .food-name,
                  .food-price {
                    padding: 5px 0;
                    font-size: 13px;
                  }

                  .food-name {
                    flex: 1;
                    border-bottom: 1px solid #dedede;
                  }
                }
              }
            }
          }
        }
      }

      .add-good-second {
        padding-top: 24px;
        display: flex;
        border-bottom: 1px solid #dedede;

        .second-left {
          flex: 0 0 80px;
          height: 32px;
          line-height: 32px;
          font-family: PingFang-SC-Regular;
          font-size: 14px;
          color: #606266;
          letter-spacing: 0;
        }

        .second-right {
          padding-bottom: 18px;

          .specification {
            margin-bottom: 30px;

            > .el-input-group__append .el-button,
            .el-input-group__append .el-select,
            .el-input-group__prepend .el-button,
            .el-input-group__prepend .el-select {
              margin: -10px 0;
            }

            &:last-child {
              margin-bottom: 0;
            }

            .button-new-tag {
              margin-left: 10px;
              height: 32px;
              line-height: 30px;
              padding-top: 0;
              padding-bottom: 0;
            }
          }
        }
      }

      .add-good-third {
        padding-top: 24px;
        border-bottom: 1px solid #dedede;

        .good-set {
          display: flex;
          height: 33px;
          line-height: 33px;
          margin-bottom: 20px;

          .good-set-name {
            flex: 0 0 90px;
            font-family: PingFang-SC-Regular;
            font-size: 14px;
            color: #606266;
            letter-spacing: 0;
            text-align: left;
          }
        }
      }

      .add-good-four {
        padding: 24px 0;
        border-bottom: 1px solid #dedede;
      }
    }
  }
}
.add-good-first /deep/ label {
  font-size: 12px;
}
.add-good-four >>> div {
  font-size: 12px;
}
.add-good-four /deep/ input {
  font-size: 10px !important;
}
.add-good-third /deep/ div {
  font-size: 12px !important;
}
.btn_tp {
  // width: 66%;
}

.btn_left {
  padding-left: 0 !important;
}
.btn_tp {
  padding-left: 0 !important;
}
.btn-op-wrapper .el-button {
  margin-left: 0;
}
.el-row /deep/ .is-round span {
  display: inline-block;
  width: 56px;
  overflow: hidden;
}

.childs .childs {
  display: flex;
  padding-left: 40px;
  align-items: center;
  justify-content: space-between;
}
.newchild {
  background: #fff;
  position: fixed;
  width: 400px;
  height: 150px;
  left: 50%;
  top: 50%;
  margin-left: -250px;
  margin-top: -0px;
  z-index: 9;
  box-shadow: 0 0 5px #888888;
  padding: 30px;
}
.langgenumsecond /deep/ .el-form-item__label {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  display: -webkit-box;
}
.add-good-dialog-wrapper /deep/ .el-form-item__label,
.add-good-dialog-wrapper .second-left,
.add-good-dialog-wrapper .second-left,
.add-good-dialog-wrapper .good-set-name good-set-name,
.add-good-dialog-wrapper .good-set-name {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  display: -webkit-box;
}
.add-good-dialog-wrapper /deep/ .manageprinter {
  padding: 0 !important;
  width: 106px;
}
.childColor{
  color: #409EFF!important;
}
</style>
